<template>
  <div class="chart_top1">
    <div class="chart_top1-title">{{ ycc }}</div>
    <!-- <el-tabs
      v-model="activeTab"
      default-active-key="1"
      @tab-click="callback"
      stretch
    >
      <el-tab-pane key="2" label="超编制" name="bz"></el-tab-pane>
      <el-tab-pane key="3" label="超职数" name="zs"></el-tab-pane>
      <el-tab-pane key="4" label="超机构" name="jg"></el-tab-pane>
      <el-tab-pane key="1" label="问题台账" name="tz"></el-tab-pane>
    </el-tabs> -->
    <div id="chart_top1" />
  </div>
</template>

<script>
export default {
  data() {
    const self = this
    return {
      icon_tz: require('@/assets/icon/icon_tz.png'),
      icon_bz: require('@/assets/icon/icon_cbz.png'),
      icon_zs: require('@/assets/icon/icon_czs.png'),
      icon_jg: require('@/assets/icon/icon_cjg.png'),
      IntervalNum: 1,
      ycc: '各地问题台账情况',
      timer: '',
      activeTab: 'bz',
      bzData: [
        1400, 2200, 1490, 1700, 2320, 1250, 1706, 1350, 1620, 1320, 1200, 640,
        1330, 1760, 1350
      ],
      zsData: [
        250, 320, 149, 170, 232, 125, 170, 135, 162, 132, 120, 64, 133, 176, 135
      ],
      jgData: [22, 32, 14, 17, 23, 12, 17, 13, 16, 13, 12, 24, 13, 17, 13],
      tzData: [
        110, 120, 149, 170, 232, 125, 170, 135, 162, 132, 120, 64, 133, 176, 135
      ],
      // chart1的配置
      option: {
        grid: {
          top: '70',
          left: '5%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        toolbox: {
          top: '0',
          right: '5%',
          itemGap: 30,
          show: true,
          itemSize: 20,
          feature: {
            myTool1: {
              show: true,
              title: '超编制',
              icon: 'path://M746.057143 1009.371429l-321.828572-153.6-321.828571 153.6v-804.571429h650.971429v804.571429z m-321.828572-234.057143l248.685715 124.342857V277.942857H175.542857v614.4l248.685714-117.028571z,M285.257143 380.342857h277.942857v73.142857H285.257143zM285.257143 541.257143h277.942857v73.142857H285.257143z,M921.6 789.942857h-73.142857V87.771429H212.114286v-73.142858h709.485714z',
              iconStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0
                }
              },
              onclick: function () {
                self.callback('bz', 1)
              }
            },
            myTool2: {
              show: true,
              title: '超职数',
              icon: 'path://M624.6 352.8c34 0 66.1 13.3 90.1 37.3s37.3 56.1 37.3 90.1-13.3 66.1-37.3 90.1-56.1 37.3-90.1 37.3-66.1-13.3-90.1-37.3-37.3-56.1-37.3-90.1 13.3-66.1 37.3-90.1 56-37.3 90.1-37.3m0-96c-123.4 0-223.5 100-223.5 223.5s100 223.5 223.5 223.5 223.5-100 223.5-223.5S748 256.8 624.6 256.8z,M624.6 706.7C486 706.7 373.3 819.5 373.3 958h-83.6c0-45.2 8.9-89 26.3-130.4 16.9-39.9 41-75.7 71.7-106.4s66.5-54.9 106.4-71.7c41.3-17.5 85.2-26.3 130.4-26.3M319 509.6c-41.5-17.3-76.9-46.2-102.2-83.6-26-38.3-39.7-83.1-39.7-129.5 0-61.7 24-119.6 67.6-163.3C288.3 89.6 346.3 65.6 408 65.6c36.7 0 73.3 8.9 105.8 25.6 31.4 16.2 59.1 39.8 80.1 68.3L528.1 208c-28.5-38.6-72.3-60.7-120.2-60.7-82.3 0-149.2 66.9-149.2 149.2 0 60.4 36 114.5 91.8 137.8L319 509.6z,M354.6 516.1c-117.4 21.1-206.7 124-206.7 247.3H64.4c0-45.2 8.9-89 26.3-130.4 16.9-39.9 41-75.7 71.7-106.4s66.5-54.9 106.4-71.7c26.2-11.1 53.3-18.7 81.2-22.8M912.6 898.4H738.1c-26.5 0-48-21.5-48-48s21.5-48 48-48h174.5c26.5 0 48 21.5 48 48 0 26.6-21.5 48-48 48z',
              iconStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0
                }
              },
              onclick: function () {
                self.callback('zs', 2)
              }
            },
            myTool3: {
              show: true,
              title: '超机构',
              icon: 'path://M222.8224 236.1344h96.0512v47.7184h-96.0512zM375.1936 236.1344h96.0512v47.7184h-96.0512zM222.8224 356.1472h96.0512v47.7184h-96.0512zM375.1936 356.1472h96.0512v47.7184h-96.0512zM222.8224 476.16h96.0512v47.7184h-96.0512zM375.1936 476.16h96.0512v47.7184h-96.0512z,M454.4512 871.0144V669.696c0-26.2144-20.0704-47.7184-45.056-47.7184H284.672c-24.7808 0-45.056 21.2992-45.056 47.7184v201.3184H165.6832V135.9872H528.384V442.368h41.984v-104.0384h287.9488v104.0384h41.984v-146.0224h-329.728V135.9872c0-23.1424-18.8416-41.984-41.984-41.984H165.6832c-23.1424 0-41.984 18.8416-41.984 41.984v735.0272H81.92v41.984h860.16v-41.984H454.4512z m-172.8512-201.3184c0-3.6864 2.2528-5.7344 3.072-5.7344h124.7232c0.8192 0 3.072 2.048 3.072 5.7344v201.3184h-130.8672V669.696z,M714.9568 832.512c-103.2192 0-186.9824-83.968-186.9824-186.9824s83.968-186.9824 186.9824-186.9824 186.9824 83.968 186.9824 186.9824-83.968 186.9824-186.9824 186.9824z m0-345.2928c-87.2448 0-158.3104 71.0656-158.3104 158.3104s71.0656 158.3104 158.3104 158.3104 158.3104-71.0656 158.3104-158.3104-71.0656-158.3104-158.3104-158.3104z,M791.9616 633.856h-65.536v-65.536a11.4688 11.4688 0 1 0-22.9376 0v65.536h-65.536a11.4688 11.4688 0 1 0 0 22.9376h65.536v65.536a11.4688 11.4688 0 1 0 22.9376 0v-65.536h65.536a11.4688 11.4688 0 1 0 0-22.9376z',
              iconStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0
                }
              },
              onclick: function () {
                self.callback('jg', 3)
              }
            },
            myTool4: {
              show: true,
              title: '问题台账',
              icon: 'path://M950.857143 73.142857v365.714286h-73.142857V146.285714H512v804.571429H73.142857V73.142857h877.714286zM715.044571 585.142857l74.020572 109.714286 73.874286-109.714286H950.857143l-73.874286 109.714286h58.368v73.142857h-109.494857v36.571429h109.568v73.142857H825.782857v72.411428h-73.142857V877.714286H642.852571v-73.142857h109.860572v-36.571429H642.852571v-73.142857h58.294858L627.273143 585.142857h87.771428zM438.857143 146.285714H146.285714v731.428572h292.571429V146.285714zM365.714286 438.857143v73.142857H219.428571V438.857143h146.285715z m0-219.428572v73.142858H219.428571V219.428571h146.285715z m438.857143 0v73.142858H585.142857V219.428571h219.428572z',
              iconStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0
                }
              },
              onclick: function () {
                self.callback('tz', 4)
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let newParams = []
            const tooltipString = []
            newParams = [...params]
            newParams.sort((a, b) => {
              return b.value - a.value
            })
            newParams.forEach((p) => {
              const cont =
                p.name +
                '<br/>' +
                p.marker +
                ' ' +
                p.seriesName +
                ': ' +
                p.value +
                '<br/>'
              tooltipString.push(cont)
            })
            return tooltipString.join('')
          }
        },
        color: 'orange',
        xAxis: [
          {
            type: 'category',
            data: [
              '自治区直属',
              '南宁市',
              '柳州市',
              '桂林市',
              '崇左市',
              '钦州市',
              '玉林市',
              '百色市',
              '防城港市',
              '贺州市',
              '贵港市',
              '河池市',
              '来宾市',
              '梧州市',
              '北海市'
            ],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              fontSize: 13,
              interval: 0,
              rotate: 40
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { show: false },
            axisLine: { show: false },
            //网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#7398Ab',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        series: [
          {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#FFD56E'
                          },
                          {
                            offset: 1,
                            color: '#FF9A22'
                          }
                        ]
                      )
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#FFD56E'
                          },
                          {
                            offset: 1,
                            color: '#FF9A22'
                          }
                        ]
                      )
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#FF9A22'
                          },
                          {
                            offset: 1,
                            color: '#FFD56E'
                          }
                        ]
                      )
                    }
                  }
                ]
              }
            },
            data: []
          },
          {
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: (e) => {
                  return e.value
                  /*console.log(e)
                        switch (e.name) {
                            case '1001':
                                return e.value;
                            case '1002':
                                return VALUE[1];
                            case '1003':
                                return VALUE[2];
                        }*/
                },
                fontSize: 14,
                color: '#FFFFFF',
                offset: [0, -25]
              }
            },
            itemStyle: {
              color: 'transparent'
            },
            tooltip: {},
            data: []
          }
        ]
      }
    }
  },
  watch: {
    // activeTab(val) {
    //   console.log('新输入的值为：'+val); // 会输出新值
    // }
  },
  created() {
    //this.allData = [this.tzData, this.bzData, this.zsData, this.jgData]
    // this.option.toolbox.feature.myTool1.icon = 'image://' + this.icon_bz
    // this.option.toolbox.feature.myTool2.icon = 'image://' + this.icon_zs
    // this.option.toolbox.feature.myTool3.icon = 'image://' + this.icon_jg
    // this.option.toolbox.feature.myTool4.icon = 'image://' + this.icon_tz
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    this.drawEcharts('bz')
    this.setTime()
  },
  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer)
  },
  methods: {
    setTime() {
      // 设置定时器
      this.timer = setInterval(() => {
        if (this.IntervalNum % 4 == 0) {
          this.ycc = '各地超编制情况'
          this.activeTab = 'bz'
          this.drawEcharts('bz')
        } else if (this.IntervalNum % 4 == 1) {
          this.ycc = '各地超职数情况'
          this.activeTab = 'zs'
          this.drawEcharts('zs')
        } else if (this.IntervalNum % 4 == 2) {
          this.ycc = '各地超机构情况'
          this.activeTab = 'jg'
          this.drawEcharts('jg')
        } else if (this.IntervalNum % 4 == 3) {
          this.ycc = '各地问题台账情况'
          this.activeTab = 'tz'
          this.drawEcharts('tz')
        }
        if (this.IntervalNum == 3) {
          this.IntervalNum = 0
        } else {
          this.IntervalNum++
        }
      }, 5000)
    },

    clearTime() {
      // 清除定时器
      clearInterval(this.timer)
    },
    callback(val, num) {
      // 页面关闭时清除定时器
      clearInterval(this.timer)
      // this.clearTime()
      // this.IntervalNum = num
      // this.setTime()
      this.drawEcharts(val)
    },
    drawEcharts(val) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart_top1'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()

      const offsetX = 20
      const offsetY = 10
      // 绘制左侧面
      const CubeLeft = new this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          // console.log(shape);
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - offsetX, shape.y - offsetY]
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = new this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
          const c4 = [shape.x + offsetX, shape.y - offsetY]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      // 绘制顶面
      const CubeTop = new this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + offsetX, shape.y - offsetY] //右点
          const c3 = [shape.x, shape.y - offsetX]
          const c4 = [shape.x - offsetX, shape.y - offsetY]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      // 注册三个面图形
      new this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
      new this.$echarts.graphic.registerShape('CubeRight', CubeRight)
      new this.$echarts.graphic.registerShape('CubeTop', CubeTop)

      if (val == 'bz') {
        this.option.toolbox.feature.myTool1.iconStyle.normal.color = '#EA9518'
        this.option.series[0].data = this.bzData
        this.option.series[1].data = this.bzData
        this.ycc = '按地区超编制情况'
      } else if (val == 'zs') {
        this.option.toolbox.feature.myTool2.iconStyle.normal.color = '#EA9518'
        this.option.series[0].data = this.zsData
        this.option.series[1].data = this.zsData
        this.ycc = '按地区超职数情况'
      } else if (val == 'jg') {
        this.option.toolbox.feature.myTool3.iconStyle.normal.color = '#EA9518'
        this.option.series[0].data = this.jgData
        this.option.series[1].data = this.jgData
        this.ycc = '按地区超机构情况'
      } else if (val == 'tz') {
        this.option.toolbox.feature.myTool4.iconStyle.normal.color = '#EA9518'
        this.option.series[0].data = this.tzData
        this.option.series[1].data = this.tzData
        this.ycc = '按地区问题台账情况'
      }
      this.option && myChart.setOption(this.option)
      // 重置option属性
      this.option = this.$options.data.call(this).option
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart_top1 {
  float: left;
  width: calc(60% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
  display: flex;
  flex-direction: column;

  .chart_top1-title {
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  #chart_top1 {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
  }

  /deep/ #tab-tz,
  /deep/ #tab-bz,
  /deep/ #tab-jg,
  /deep/ #tab-zs {
    color: #a9a9a9;
  }

  /deep/ .el-tabs__item.is-active {
    //切换活动项的文字颜色
    color: #409eff !important;
  }
}
</style>
